<template>
	<div class="tab-chart">
		<div class="tab-chart__header">
			<ul class="tab-chart__tab" >
				<li class="active">财务统计</li>
			</ul>
			<ul>
				<li>
					<el-date-picker size="mini" v-model="both_year" type="daterange" start-placeholder="开始日期" format="YYYY-MM-DD"
					end-placeholder="结束日期" value-format="YYYY-MM-DD" placeholder="选择一个年份" :shortcuts="shortcuts"
					@change="yearChange()"></el-date-picker>
				<el-button style="margin-left: 30px;" @click="yearChange()" type="primary" size="mini">查询</el-button>
				</li>
			</ul>
			
		</div>
		<el-descriptions class="margin-top" :column="3" :size="size" border>
			<template #extra>
				
				<!-- <el-button type="primary" size="mini">统计</el-button> -->
			</template>
			<el-descriptions-item>
				<template #label>
					<div class="cell-item">
						<el-icon :style="iconStyle">
							<user />
						</el-icon>
						购买常规课总课时
					</div>
				</template>
				{{ result.all_common_num }}
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<div class="cell-item">
						<el-icon :style="iconStyle">
							<iphone />
						</el-icon>
						消耗常规课课时
					</div>
				</template>
				{{ result.all_common_use_num }}
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<div class="cell-item">
						<el-icon :style="iconStyle">
							<location />
						</el-icon>
						剩余常规课课时
					</div>
				</template>
				{{ result.all_common_leave_num }}
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<div class="cell-item">
						<el-icon :style="iconStyle">
							<tickets />
						</el-icon>
						购买特殊课总课时
					</div>
				</template>
				{{ result.all_special_num }}
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<div class="cell-item">
						<el-icon :style="iconStyle">
							<office-building />
						</el-icon>
						消耗特殊课课时
					</div>
				</template>
				{{ result.all_special_use_num }}
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<div class="cell-item">
						<el-icon :style="iconStyle">
							<office-building />
						</el-icon>
						剩余特殊课课时
					</div>
				</template>
				{{ result.all_special_leave_num }}
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<div class="cell-item">
						<el-icon :style="iconStyle">
							<office-building />
						</el-icon>
						收入金额（元）
					</div>
				</template>
				{{ result.all_into_money }}
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<div class="cell-item">
						<el-icon :style="iconStyle">
							<office-building />
						</el-icon>
						剩余停学学生总课时(常规课)
					</div>
				</template>
				{{ result.rest_stop_study_student }}
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<div class="cell-item">
						<el-icon :style="iconStyle">
							<office-building />
						</el-icon>
						剩余停课学生总课时(常规课)
					</div>
				</template>
				{{ result.rest_stop_course_student }}
			</el-descriptions-item>
			
		</el-descriptions>
		<div class="tab-chart__header">
			<ul class="tab-chart__tab">
				<li class="active">运营数据</li>
			</ul>

			<!-- <span class="tab-chart__year">{{}}</span> -->
			<el-date-picker size="mini" v-model="year" value-format="YYYY" type="year" placeholder="选择一个年份"
				@change="yearChange()"></el-date-picker>
		</div>
		<el-tabs type="border-card">
			<el-tab-pane label="查看课时消耗">

				<div class="tab-chart__container">
					<v-chart :option="chartOption" autoresize />
				</div>
			</el-tab-pane>
			<el-tab-pane label="查看收入情况">

				<div class="tab-chart__container">
					<v-chart :option="chartOption_into" autoresize />
				</div>
			</el-tab-pane>
		</el-tabs>


	</div>
</template>

<script lang="ts">
import { defineComponent, inject, onMounted, reactive, ref } from "vue";
import func from "../../../../../../vue-temp/vue-editor-bridge";
import { isPc } from "/@/core/utils";

export default defineComponent({
	setup() {
		// 请求服务
		const service = inject<any>("service");
		const barWidth = isPc() ? 25 : 15;
		const result = ref("");
		const rest_class = async function (year) {
			const res = await service.studentService.restAllClass({ year: year.year, both_year: year.both_year});
			chartOption.series[0].data = res.studying;
			chartOption.series[1].data = res.leave_sum;

			console.log(res);

			result.value = res;
			// console.log(res);
		};

		const finance_into = async function (year) {
			const res = await service.financeService.into_finance({ year: year });
			chartOption_into.series[0].data = res.money;
			chartOption_into.series[1].data = res.into_num;
			chartOption_into.series[2].data = res.common_num;
			chartOption_into.series[3].data = res.special_num;

			console.log(res);
		};

		const chartOption = reactive<any>({
			label: {
				show: true,
				position: "top"
			},
			legend: {
				data: ["请假人数", "消耗课时数量"]
			},
			xAxis: {
				type: "category",
				data: [
					"一月",
					"二月",
					"三月",
					"四月",
					"五月",
					"六月",
					"七月",
					"八月",
					"九月",
					"十月",
					"十一月",
					"十二月"
				]
			},
			yAxis: {
				type: "value"
			},
			series: [
				{
					name: "消耗课时数量",
					data: [150, 230, 224, 218, 135, 147, 260],
					type: "line"
				},
				{
					name: "请假人数",
					data: [150, 230, 224, 218, 135, 147, 260],
					type: "line"
				}
			]
		});

		const chartOption_into = reactive<any>({
			label: {
				show: true,
				position: "top"
			},
			legend: {
				data: ["收入金额（元）", "收入笔数", "新增常规课时数", "新增特殊课时数"]
			},
			xAxis: {
				type: "category",
				data: [
					"一月",
					"二月",
					"三月",
					"四月",
					"五月",
					"六月",
					"七月",
					"八月",
					"九月",
					"十月",
					"十一月",
					"十二月"
				]
			},
			yAxis: {
				type: "value"
			},
			series: [
				{
					name: "收入金额（元）",
					data: [150, 230, 24, 218, 15, 147, 260],
					type: "line"
				},
				{
					name: "收入笔数",
					data: [150, 230, 224, 28, 135, 147, 260],
					type: "line"
				},
				{
					name: "新增常规课时数",
					data: [150, 2, 224, 218, 135, 147, 260],
					type: "line"
				},
				{
					name: "新增特殊课时数",
					data: [10, 230, 224, 218, 135, 147, 260],
					type: "line"
				}
			]
		});

		onMounted(() => {
			defaultDate()
			console.log(year.value,"year.value");
			
			rest_class({ year: year.value, both_year: both_year.value });
			finance_into(year.value)
		});

		function now_year() {
			let year = new Date();
			return year.getFullYear();
		}

		//设置默认日期
   	function defaultDate () {
      const end = GetDateStr(0);
			const start = "1900-01-01";
      both_year.value= [start, end] //将值设置给插件绑定的数据
		}
		const GetDateStr = (dayCount) => {
			const dd = new Date()
			dd.setDate(dd.getDate() + dayCount) // 获取dayCount天后的日期
			const y = dd.getFullYear()
			const m = (dd.getMonth() + 1) < 10 ? '0' + (dd.getMonth() + 1) : (dd.getMonth() + 1)// 获取当前月份的日期，不足10补0
			const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
			return y + '-' + m + '-' + d
		}

		const year = ref("" + now_year());
		const both_year = ref([]);

		// 获取日期
		function getDay(d, num) {
			const date = new Date(new Date(d).setDate(new Date(d).getDate() + num))
			const year = date.getFullYear()
			const month = (date.getMonth() + 1 + "").padStart(2, "0")
			const day = (date.getDate() + "").padStart(2, "0")
			return `${year}-${month}-${day}`
		}

		// 是否是闰年
		function isLeap(year) {
			return (year % 4 == 0 && year % 100 != 0) || year % 400 == 0
		}

		// 返回去年日期
		function lastYearDate(d) {
			const date = new Date(d)
			const year = date.getFullYear()
			const month = date.getMonth() + 1
			const day = date.getDate()
			const lastYear = year - 1
			const thisYearisLeap = isLeap(year)
			const lastYearIsLeap = isLeap(lastYear)
			// 特殊情况：去年是否是闰年 或 今年是闰年且为12月31日
			if (lastYearIsLeap || (thisYearisLeap && month == 12 && day == 31)) return getDay(d, -366)
			return getDay(d, -365)
		}
		


		const yearChange = function () {
			rest_class({ year: year.value, both_year: both_year.value });
			finance_into(year.value)
			console.log(year.value);
		};
		const shortcuts = [
			{
				text: "全部",
				value: () => {
					const end = new Date();
					const start = "1900-01-01";
					// start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
					return [start, end];
				}
			},
			{
				text: "本月",
				value: () => {
					let nowYear = new Date().getFullYear();
					let nowMonth = new Date().getMonth();
					const start = new Date(nowYear, nowMonth, 1)

					const end = new Date(nowYear, nowMonth + 1, 0)
					return [start, end];
				}
			},
			{
				text: "上月",
				value: () => {
					const nowMonth = new Date().getMonth() // 当前月(0~11)
					const nowDay = new Date().getDate() // 当前多少号(1~31)
					const nowYear = new Date().getFullYear() // 当前年
					let lastTotalDay = ''
					// 如果是一月份
					if (nowMonth === 0) {
						// 获取去年12月总共有多少天
						lastTotalDay = new Date(nowYear - 1, 12, 0).getDate()
					} else {
						// 获取上月总共有多少天
						lastTotalDay = new Date(nowYear, nowMonth, 0).getDate()
					}
					// 上月总天数加上当前多少号 前的 日期
					const start = GetDateStr(-(nowDay - 1 + lastTotalDay))
					const end = GetDateStr(-nowDay)


					return [start, end];
				}
			},

			{
				text: "今年",
				value: () => {
					let nowYear = new Date().getFullYear();
					const end = new Date();
					// const start = new Date();
					const start = new Date(nowYear, 0, 1)
					// start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
					return [start, end];
				}
			},
			{
				text: "去年",
				value: () => {
					let nowYear = new Date().getFullYear() - 1;
					const end = `${nowYear}-12-31`
					// const start = new Date();
					const start = new Date(nowYear, 0, 1)
					// start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
					return [start, end];
				}
			},
			{
				text: "本季度",
				value: () => {
					let nowYear = new Date().getFullYear();
					let nowMonth = new Date().getMonth();
					let jd = Math.ceil((nowMonth + 1) / 3);
					const start = new Date(nowYear, (jd - 1) * 3, 1)
					const end = new Date(nowYear, jd * 3, 0)
					// start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
					return [start, end];
				}
			},


		];


		return {
			chartOption,
			chartOption_into,
			now_year,
			year,
			yearChange,
			result,
			shortcuts,
			both_year
		};
	},
	data() {
		return {};
	}
});
</script>

<style lang="scss" scoped>
.tab-chart {
	&__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50px;
		padding: 0 20px;

		ul {
			li {
				list-style: none;
				float: left;
				margin-right: 20px;
				font-size: 15px;
				color: #dbdbdb;
				cursor: pointer;

				&.active {
					color: #000;
					font-weight: bold;
				}
			}
		}
	}

	&__year {
		font-size: 14px;
		position: relative;

		&::before {
			display: block;
			content: "";
			height: 8px;
			width: 8px;
			border-radius: 8px;
			background-color: #000;
			position: absolute;
			left: -15px;
			top: 4px;
		}
	}

	&__container {
		height: 300px;
		padding: 0 15px;

		.echarts {
			height: 100%;
			width: 100%;
		}
	}
}
</style>
